<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增路由')" />
	<th:block th:include="include :: select2-css" />
</head>
<body>
    <div class="main-content">
        <form id="form-route-add" class="form-horizontal">
            <h4 class="form-header h4">基本信息</h4>
            <div class="row">
            	<div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red;">* </span> id (全局唯一)：</label>
                        <div class="col-sm-6">
                            <input name="routeId" placeholder="请输入路由 id" class="form-control" type="text" maxlength="64" required/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red;">* </span>uri：</label>
                        <div class="col-sm-6">
                            <input id="uri" name="uri" placeholder="请输入 uri" class="form-control" type="text" maxlength="256" required/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"> order：</label>
                        <div class="col-sm-6">
                            <input id="order" name="order" placeholder="请输入序号" class="form-control" type="number" value="0" min="0" step="1" max="6000"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red;">* </span>predicates：</label>
                        <div class="col-sm-6">
                            <a class="btn btn-success" onclick="selectPredicates()">
                                <i class="fa fa-plus"></i> 添加
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">filters：</label>
                        <div class="col-sm-6">
                            <a class="btn btn-success" onclick="selectFilters()">
                                <i class="fa fa-plus"></i> 添加
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">其他信息</h4>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">备注：</label>
                        <div class="col-sm-6">
                            <textarea name="remark" maxlength="500" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: select2-js" />
	<script type="application/javascript">
	    const prefix = ctx + "system/route";

        function submitHandler() {
            if ($("#form-route-add").validate().form()) {
                let predicates = $('input[name="predicates"]').val();
                let filters = $('input[name="filters"]').val();
                if (undefined === predicates || null == predicates || '' === predicates) {
                    // layer.alert("predicates 不能为空");
                    $.modal.alertError("predicates 不能为空");
                    // $.modal.msgError("predicates 不能为空");
                    return;
                }
                let data = $("#form-route-add").serializeArray();
                $.operate.saveTab(prefix + "/addRoute", data);
            }
        }

        /**
         * 选择断言
         */
        function selectPredicates() {
            const url = prefix + "/addPredicate";
            let options = {
                title: '选择 predicate',
                width: "800",
                url: url,
                callBack: doSubmitPredicate
            };
            $.modal.openOptions(options);
		}

        function doSubmitPredicate(index, layero) {
            // // 获取弹窗参数（方式一）
            // var body = layer.getChildFrame('body', index);
            // console.log(body.find('#id').val());
            // // 获取弹窗参数（方式二）
            // console.log($(layero).find("iframe")[0].contentWindow.document.getElementById("id").value);

            let contentWindow = layero.find("iframe")[0].contentWindow;
			let predicateName = contentWindow.$('#predicate-name').val();

            if (!contentWindow.$('#form-predicate-add').validate().form()){
                return;
            }

            $('.col-sm-6:eq(3) p:eq(0)').remove();
            $('.col-sm-6:eq(3) a').after('<p></p>');
            $('#' + predicateName).remove();

            let html;
            switch (predicateName) {
                case 'Path':

                    let patterns = contentWindow.$('input[name="patterns"]').val();

                    html = '<input hidden name="predicates" value="' + predicateName + '=' + patterns + '">' +
                        '<p id="' + predicateName + '">' + predicateName + '=' + patterns + '</p>';
                    $('.col-sm-6:eq(3)').append(html);
                    break;

                case 'Method':

                    let methods = contentWindow.$('#methods').val()

                    html = '<input hidden name="predicates" value="' + predicateName +'=' + methods + '">' +
                        '<p id="' + predicateName + '">' + predicateName + '=' + methods + '</p>';
                    $('.col-sm-6:eq(3)').append(html);
                    break;

                case 'Query':

                    let param = contentWindow.$('input[name="param"]').val();
                    let regexp = contentWindow.$('input[name="regexp"]').val();

                    html = '<input hidden name="predicates" value="' + predicateName + '=' + param + '">' +
                        '<p id="' + predicateName + '">' + predicateName + '=' + param + '</p>';
                    if (undefined !== regexp && null != regexp && '' !== regexp) {
                        html = '<input hidden name="predicates" value="' + predicateName + '=' + param + ',' + regexp + '">' +
                            '<p id="' + predicateName + '">' + predicateName + '=' + param + ',' + regexp + '</p>';
                    }
                    $('.col-sm-6:eq(3)').append(html);
                    break;

                case 'Weight':

                    let group = contentWindow.$('input[name="group"]').val();
                    let weight = contentWindow.$('input[name="weight"]').val();

                    html = '<input hidden name="predicates" value="' + predicateName + '=' + group + ',' + weight + '">' +
                        '<p id="' + predicateName + '">' + predicateName + '=' + group + ',' + weight + '</p>';
                    $('.col-sm-6:eq(3)').append(html);
                    break;

                case 'MyCustom':

                    let method = contentWindow.$('#method option:selected').val();

                    html = '<input hidden name="predicates" value="' + predicateName + '=' + method + '">' +
                        '<p id="' + predicateName + '">' + predicateName + '=' + method + '</p>';
                    $('.col-sm-6:eq(3)').append(html);
                    break;

                default:
                    break;
            }

            layer.close(index);
		}

        /**
         * 选择过滤器
         */
        function selectFilters() {
            const url = prefix + "/addFilter";
            let options = {
                title: '选择 filter',
                width: "800",
                url: url,
                callBack: doSubmitFilter
            };
            $.modal.openOptions(options);
        }

        function doSubmitFilter(index, layero) {
            // // 获取弹窗参数（方式一）
            // var body = layer.getChildFrame('body', index);
            // console.log(body.find('#id').val());
            // // 获取弹窗参数（方式二）
            // console.log($(layero).find("iframe")[0].contentWindow.document.getElementById("id").value);

            let contentWindow = layero.find("iframe")[0].contentWindow;
            let filterName = contentWindow.$('#filter-name').val();
            if (!contentWindow.$('#form-filter-add').validate().form()){
                return;
            }

            $('.col-sm-6:eq(4) p:eq(0)').remove();
            $('.col-sm-6:eq(4) a').after('<p></p>');
            $('#' + filterName).remove();

            let html;
            switch (filterName) {
                case 'StripPrefix':

                    let parts = contentWindow.$('input[name="parts"]').val();

                    html = '<input hidden name="filters" value="' + filterName + '=' + parts + '">' +
                        '<p id="' + filterName + '">' + filterName + '=' + parts + '</p>';
                    $('.col-sm-6:eq(4)').append(html);
                    break;

                case 'MyCustom':

                    let method = contentWindow.$('#method option:selected').val();

                    html = '<input hidden name="filters" value="' + filterName + '=' + method + '">' +
                        '<p id="' + filterName + '">' + filterName + '=' + method + '</p>';
                    $('.col-sm-6:eq(4)').append(html);
                    break;

                default:
                    break;
            }

            layer.close(index);
        }
    </script>
</body>
</html>
